<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="订单号：">
                <el-input  placeholder="Approved by" clearable />
                </el-form-item>
                <el-form-item label="下单时间：">
                <el-date-picker
                    
                    type="date"
                    placeholder="Pick a date"
                    clearable
                />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="onSubmit">下载报告</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="el-card">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="订单号" width="180" />
                <el-table-column prop="name" label="订单状态" width="180" />
                <el-table-column prop="address" label="用户名" />
                <el-table-column prop="address" label="手机号" />
                <el-table-column prop="address" label="地址" />
                <el-table-column prop="address" label="下单时间" />
                <el-table-column prop="address" label="实收金额" />
                <el-table-column prop="address" label="操作" >
                    <template #="{row}">
                        <el-button type="primary" @click="editpermission(row)">编辑</el-button>
                        <el-button type="danger" @click="deletepermission(row)">删除</el-button>       
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <el-pagination
            class='pagination'
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.el-card{
    margin-bottom:10px;

}
.pagination{
    position: fixed;
    bottom:30px;
    right:5px;
}
</style>